<template>
    <div>
        <h1 class="title">Create Your New Blog</h1>
        <form @submit.prevent="createPost">
            <div>
                <label for="title" class="front">Title</label>
                <input type="text" id="title" class="txt0" v-model="title" required>
            </div>
            <div>
                <label for="content" class="front">Content</label>
                <textarea class="txt7" id="content" v-model="content" required></textarea>
            </div>
            <button type="submit" class="btn">CREATE</button>
        </form>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            title: '',
            content: '',
            userid:''
        };
    },
    methods: {
        createPost() {
            const post = {
                title: this.title,
                content: this.content
            };

            axios.post('/api/posts', post)
                .then(response => {
                    console.log(response.data);
                    this.title = '';
                    this.content = '';
                    alert("创建成功")
                    this.$router.replace({ path: "/user/postList" });
                })
                .catch(error => {
                    console.log(error);
                });
        },
    }
};
</script>

<style>

.front{
  font-size: 15px;
  font-weight: bolder;
}
textarea{
  color:#2c3e50;
  font-size: 15px;
  font-weight: bold;
}
.txt0{
  color:#2c3e50;
  font-size: 15px;
  font-weight: bold;
  width: 215px;
  height: 25px;
  outline: none;
  border:2px solid #000000;
  border-radius: 5px;
  background:transparent;
}
.txt7{
  margin-top: 12px;
  width: 425px;
  height: 215px;
  outline: none;
  border:2px solid #000000;
  border-radius: 5px;
  background:transparent;
}
.btn{
  width:65px;
  height: 35px;
  background:radial-gradient(ellipse at center,#73f219,#d1d2d4,#000000);
  border-radius: 5px;
}
.btn:hover{
  cursor: pointer;
  background: radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);
}
</style>